<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >查询条件</el-button
          >
          <el-button
            style="float: right; padding: 3px 0;color:red"
            type="text" @click="GetDepartmentOvertimeExcel()"
            >导出</el-button
          >
        </div>
        <div v-show="isShow1 == true">
          <tr>
            <td>生产部门：</td>
            <td>
               <el-select v-model="depname" clearable placeholder="全部">
               <el-option
                v-for="item in drop_down"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            </td>
            <td>年份：</td>
            <td>
              <el-select
                v-model="year"
                clearable
                placeholder="请选择"
              >
                <el-option :label="2017" :value="2017"></el-option>
                <el-option :label="2018" :value="2018"></el-option>
                <el-option :label="2019" :value="2019"></el-option>
                <el-option :label="2020" :value="2020"></el-option>
                <el-option :label="2021" :value="2021"></el-option>
                <el-option :label="2022" :value="2022"></el-option>
              </el-select>
            </td>
             <td>月份：</td>
            <td>
              <el-select
                v-model="month"
                clearable
                placeholder="请选择"
              >
                <el-option :label="1" :value="1"></el-option>
                <el-option :label="2" :value="2"></el-option>
                <el-option :label="3" :value="3"></el-option>
                <el-option :label="4" :value="4"></el-option>
                <el-option :label="5" :value="5"></el-option>
                <el-option :label="6" :value="6"></el-option>
                <el-option :label="7" :value="7"></el-option>
                <el-option :label="8" :value="8"></el-option>
                <el-option :label="9" :value="9"></el-option>
                <el-option :label="10" :value="10"></el-option>
                <el-option :label="11" :value="11"></el-option>
                <el-option :label="12" :value="12"></el-option>
              </el-select>
            </td>
            <td>
              <el-button type="primary" @click="GetDepartmentOvertimeManagementPo()" >查询</el-button>
            </td>
          </tr>
        </div>
      </el-card>
    </div>

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text"
            >查询结果</el-button
          >
          <el-button
            @click="isShow2 = !isShow2"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow2 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <h3>部门加班补助{{month==1?year-1:year}}.{{month-1>0?month-1:12}}.16 - {{year}}.{{month}}.15</h3>
        <div v-show="isShow2 == true">
          <el-table
    :data="tableData"
    border
    style="width: 100%" show-summary >
    <el-table-column
      fixed
      prop="depname"
      label="部门名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="id"
      label="序号"
      width="120" >
    </el-table-column>
     <el-table-column
      prop="staff_name"
      label="姓名"
      width="120">
    </el-table-column>
     <el-table-column
      prop="monthly_salary"
      label="月工资"
      width="120">
    </el-table-column>
     <el-table-column
      prop="ask_leave"
      label="请假(h)"
      width="120">
    </el-table-column>
     <el-table-column
      prop="late"
      label="迟到"
      width="120">
    </el-table-column>
     <el-table-column
      prop="work_overtime"
      label="加班(h)"
      width="120">
    </el-table-column>
     <el-table-column
      prop="coefficient"
      label="系数"
      width="120">
    </el-table-column> 
     <el-table-column
      prop="calculate_the_forehead"
      label="计算额"
      width="120">
    </el-table-column>
     <el-table-column
      prop="the_quota"
      label="调配额"
      width="120">
    </el-table-column>
  </el-table>  
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { GetAllDepartment ,GetDepartmentOvertimeExcel,GetDepartmentOvertimeManagementPo} from "./AttendanceManagementApi";
export default {
  data() {
    return {
      depname:null,
      personnel:null,
      year:2022,
      month:1,
       drop_down:[],
      tableData: [],
      options: [],
      isShow1: true, 
      isShow2: true, 
      searchModel: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        searchItem: {
          dictionary_name: null,
          dictionary_type: null,
        },
      },
      form: {
        dictionary_name: null,
        dictionary_type: null,
        dictionary_describe: null,
        dictionary_code: 0,
      },
    };
  },
  created() {
    this.GetAllDepartment();
  },
  methods: {
     GetAllDepartment(){
      GetAllDepartment().then((res)=>{
      this.drop_down=res.data;
      var a=res.data;
         a.forEach(r => {
        this.depname=r;
        return;
      });
      this.GetDepartmentOvertimeManagementPo();
      })
    },
    GetDepartmentOvertimeExcel(){
      GetDepartmentOvertimeExcel(this.depname,this.year,this.month).then((res)=>{    
        alert(res.data)
      })
    },
    GetDepartmentOvertimeManagementPo(){
      GetDepartmentOvertimeManagementPo(this.depname,this.year,this.month).then((res)=>{
       this.tableData=res.data;
      })
    },
  },
};
</script>